<template>
  <d2-container :class="{ 'page-compact': crud.pageOptions.compact }">
    <template slot="header">
      <div>
        来自应用管理 <el-tag> {{ $route.query.name }}</el-tag>
      </div>
    </template>
    <d2-crud-x
      ref="d2Crud"
      v-bind="_crudProps"
      v-on="_crudListeners"
      @releaseOnline="releaseOnline"
      @versionRollback="versionRollback"
      @grayscaleBeta="grayscaleBeta"
      @deviceUpgrade="deviceUpgrade"
      @upgradeLogging="upgradeLogging"
    >
      <div slot="header">
        <crud-search
          ref="search"
          :options="crud.searchOptions"
          @submit="handleSearch"
        />
        <el-button-group>
          <el-button size="small" type="primary" @click="addRow"
            ><i class="el-icon-plus" /> 发布新版本</el-button
          >
        </el-button-group>
        <crud-toolbar
          :search.sync="crud.searchOptions.show"
          :compact.sync="crud.pageOptions.compact"
          :columns="crud.columns"
          @refresh="doRefresh()"
          @columns-filter-changed="handleColumnsFilterChanged"
        />
      </div>
      <template slot="createBtnFormSlot" slot-scope="scope">
        <el-button
          :disabled="scope.mode === 'view'"
          icon="el-icon-plus"
          type="primary"
          circle
          @click="onLinkBtn"
        ></el-button>
      </template>
      <template slot="download_urlSlot" slot-scope="scope">
        <el-link :href="scope.row.download_url" type="primary" target="_blank">下载</el-link>
      </template>
    </d2-crud-x>
    <!-- 版本回滚 -->
    <el-dialog title="版本回滚" :visible.sync="versionRollbackDialog" width="25%">
      <div v-html="versionRollbackTitle"></div>
      <br>
      <el-form :model="versionRollbackForm">
        <el-form-item>
          <el-select v-model="versionRollbackForm.version_id" placeholder="请选择版本到的回滚" style="width: 100%;">
            <el-option
              v-for="item in versionRollbackData"
              :key="item.id"
              :label="item.version_number"
              :value="item.id">
              <span style="float: left">{{ item.version_number }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.release_time }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="versionRollbackDialog = false" size="small">取 消</el-button>
        <el-button type="primary" @click="versionRollbackOk" size="small">回 滚</el-button>
      </div>
    </el-dialog>
    <!--  灰度内测  -->
    <grayscale-beta v-if="grayscaleBetaData.dialog" :grayscaleBetaData="grayscaleBetaData"></grayscale-beta>
    <!--  设备更新进度  -->
    <el-drawer
      v-if="deviceUpgradeDrawer"
      :visible.sync="deviceUpgradeDrawer"
      :size="900">
      <div slot="title">
        <span>设备更新进度</span>
        <el-tag size="small" style="margin-left: 10px">{{appVersionRow.title}}</el-tag>
      </div>
      <app-version-device-upgrade style="margin-top: 80px;margin-left: 10px" :versionId="appVersionRow.id"></app-version-device-upgrade>
    </el-drawer>
    <!--  升级日志  -->
    <el-drawer
      v-if="upgradeLoggingDrawer"
      :visible.sync="upgradeLoggingDrawer"
      :size="900">
      <div slot="title">
        <span>升级日志</span>
        <el-tag size="small" style="margin-left: 10px">{{appVersionRow.title}}</el-tag>
      </div>
      <app-version-upgrade-logging style="margin-top: 80px;margin-left: 10px" :versionId="appVersionRow.id"></app-version-upgrade-logging>
    </el-drawer>
  </d2-container>
</template>

<script>
import * as api from './api'
import { crudOptions } from './crud'
import { d2CrudPlus } from 'd2-crud-plus'
import appVersionDeviceUpgrade from "@/views/plugins/dvadmin-upgrade-center-web/src/appVersion/deviceUpgrade/index";
import AppVersionUpgradeLogging from "@/views/plugins/dvadmin-upgrade-center-web/src/appVersion/upgradeLogging/index";
import GrayscaleBeta from "@/views/plugins/dvadmin-upgrade-center-web/src/appVersion/grayscaleBeta/index";
export default {
  name: 'appVersion',
  components: {GrayscaleBeta, AppVersionUpgradeLogging, appVersionDeviceUpgrade},
  mixins: [d2CrudPlus.crud],
  data () {
    return {
      versionRollbackRow: {}, // 可回滚版本当前数据
      versionRollbackDialog: false,
      versionRollbackTitle: '',
      versionRollbackForm: {
        version_id:undefined
      },
      versionRollbackData:[], // 可回滚版本数据
      // 设备更新进度值
      deviceUpgradeDrawer: false,
      appVersionRow: {},
      // 更新日志
      upgradeLoggingDrawer: false,
      // 灰度内测
      grayscaleBetaData: {
        dialog: false,
        application: undefined
      }
    }
  },
  methods: {
    getCrudOptions () {
      return crudOptions(this)
    },
    pageRequest (query) {
      const application = this.$route.query.id
      return api.GetList({ ...query, application: application })
    },
    addRequest (row) {
      const application = this.$route.query.id
      return api.createObj(row, application)
    },
    updateRequest (row) {
      return api.UpdateObj(row)
    },
    delRequest (row) {
      return api.DelObj(row.id)
    },
    // 跳转到添加按钮界面
    onLinkBtn () {
      this.$router.push({ path: '/button' })
    },
    // 发布上线
    releaseOnline(data){
      this.$confirm('此操作将发布 <span style="color: teal">['+data.row.version_number+']</span> 版本,已上线的 ' +
        '<span style="color: teal">['+this.getDictionaryLabel('upgrade_center_platform',data.row.platform)+']</span> ' +
        '平台版本将会下线,是否继续?', '提示', {
        confirmButtonText: '发布',
        cancelButtonText: '取消',
        dangerouslyUseHTMLString:true,
        type: 'warning'
      }).then(() => {
        data.row
        api.ReleaseOnline(data.row.id).then(ret => {
          console.log(ret)
          if (ret.code === 2000){
            this.$message({
              type: 'success',
              message: '发布上线成功!'
            });
            this.doRefresh({ from: 'load' })
          }
        })
      })
    },
    // 版本回滚
    versionRollback(data){
      this.versionRollbackTitle = '此操作将回滚<span style="color: teal">['+this.getDictionaryLabel('upgrade_center_platform',data.row.platform)+']</span> 平台的 <span style="color: teal">['+data.row.version_number+']</span> 版本,请选择需要回滚到的版本'
      this.versionRollbackRow =data.row
      const application = this.$route.query.id
      api.GetList({ application: application,platform: data.row.platform }).then(ret => {
        if (ret.code === 2000) {
          let data = []
          ret.data.data.map(value=>{
            if (value.id !== this.versionRollbackRow.id){
              data.push({
                id : value.id,
                version_number : value.version_number,
                release_time : value.release_time,
              })
            }
          })
          this.versionRollbackData = data
          this.versionRollbackDialog =true
        }
      })
    },
    // 回滚版本确认事件
    versionRollbackOk(){
      api.VersionRollback({ id: this.versionRollbackRow.id, rollback_version_id:this.versionRollbackForm.version_id }).then(ret => {
        if (ret.code === 2000) {
          this.versionRollbackDialog =false
          this.doRefresh({ from: 'load' })
        }
      })
    },
    // 灰度内测
    grayscaleBeta(scope){
      this.grayscaleBetaData.dialog = true
      this.grayscaleBetaData.application = scope.row.application
      this.grayscaleBetaData.versionId = scope.row.id
    },
    // 设备更新进度
    deviceUpgrade(scope){
      this.deviceUpgradeDrawer =true
      this.appVersionRow = scope.row
    },
    // 升级日志
    upgradeLogging(scope){
      this.upgradeLoggingDrawer =true
      this.appVersionRow = scope.row
    }
  }
}
</script>

<style lang="scss">
.yxtInput {
  .el-form-item__label {
    color: #49a1ff;
  }
}
</style>
